<template>
  <BasicForm @register="registerForm" />
</template>
<script lang="ts" setup>
  import { ref, unref, defineExpose, watch, defineProps, onMounted } from 'vue';
  import { BasicForm, useForm, FormSchema } from '@mxpio/components';
  import { duplicateCheck } from '@mxpio/api/src/common/common';

  defineOptions({ name: 'CustomForm' });

  const props = defineProps({
    formModel: {
      type: Object,
      default: () => ({}),
    },
  });

  const isUpdate = ref(true);
  const formSchema: FormSchema[] = [
    {
      field: 'faDeptId',
      label: '父部门',
      component: 'TreeSelect',
      componentProps: {
        fieldNames: {
          label: 'deptName',
          // key: 'id',
          value: 'id',
        },
        getPopupContainer: () => document.body,
      },
    },
    {
      field: 'deptCode',
      label: '部门编码',
      component: 'Input',
      required: true,
      rules: [
        {
          // @ts-ignore
          validator: async (rule, value) => {
            return new Promise((resolve, reject) => {
              if (!value || unref(isUpdate)) return resolve();
              duplicateCheck({
                tableName: 'mb_dept',
                column: 'dept_code_',
                key: value,
                exclude: unref(isUpdate) ? value : '',
              })
                .then((res) => {
                  if (res === 1) {
                    return reject('编码已存在');
                  }
                  return resolve();
                })
                .catch((err) => {
                  reject(err.message || '验证失败');
                });
            });
          },
          trigger: 'blur',
        },
      ],
    },
    {
      field: 'deptName',
      label: '部门名称',
      component: 'Input',
      required: true,
    },
    {
      field: 'deptLevel',
      label: '部门级别',
      component: 'DictSelect',
      componentProps: {
        dictCode: 'MB_SYSTEM_DEPT_LEVEL',
      },
      required: true,
    },
    {
      field: 'deptType',
      label: '部门类型',
      component: 'DictSelect',
      componentProps: {
        dictCode: 'MB_SYSTEM_DEPT_TYPE',
        numberToString: true,
      },
      required: true,
    },
    {
      field: 'deptManager',
      label: '部门负责人',
      component: 'UserByDeptSelect',
      componentProps: {
        multiple: false,
      },
      itemProps: {
        autoLink: false,
      },
    },
    {
      field: 'deptDesc',
      label: '描述',
      component: 'InputTextArea',
    },
  ];

  watch(
    props.formModel,
    (newValue) => {
      console.log('person变化了', newValue);
      onMounted(() => {
        setFieldsValue(newValue);
      });
    },
    {
      deep: true,
      immediate: true,
    },
  );

  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 100,
    baseColProps: { span: 24 },
    schemas: formSchema,
    showActionButtonGroup: false,
  });

  const updateBpmnStatus = async ({ formData, state }) => {
    try {
      console.log('formData', formData);
      if (state === 'COMPLETED') {
        // 审批完成回写业务单状态为已审核
        // const res = await getAction(this.url.save + this.bpmnData.businessKey + '/03') // 保存更新后的行数据
        // return res
      } else if (state === 'INTERNALLY_TERMINATED') {
        // 回写业务单状态为已终止
        // const res = await getAction(this.url.save + this.bpmnData.businessKey + '/99') // 保存更新后的行数据
        // return res
      }
      return {};
    } catch (error) {
      return error;
    }
  };

  defineExpose({
    validate,
    resetFields,
    setFieldsValue,
    updateBpmnStatus,
  });
</script>
